<div class="row flex-xl-nowrap">
  <app-navbar class="col-sm-2 nav-set">
  </app-navbar>
  <div class="col-sm-10 nav-set wrapper">
    <div class="overlay" *ngIf="hasApply">
      <div class="spinner-wrapper">
        <app-spinner message="Setting update"></app-spinner>
      </div>
    </div>
    <div class="container-fluid infoPage">
      <div class="row">
        <div class="col-sm-8 offset-sm-2">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <span>{{'SETTINGS.EnableProxy' | translate}}</span>
              </div>
              <div class="col-sm-6">
                <div class="ckbx-style-9">
                  <input type="checkbox" id="useSocksproxy" [(ngModel)]="settings.UseSocksproxy" name="useSocksproxy">
                  <label for="useSocksproxy"></label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-6">
                <span>{{'SETTINGS.ProxyURL' | translate}}</span>
              </div>
              <div class="col-sm-6">
                <div class="input-group-sm">
                  <input *ngIf="settings.UseSocksproxy" name="socksProxyURL" type="text" title="Examples: socks5://demo:demo@192.168.99.100:1080, http://proxy.domain.com:3128"  [(ngModel)]="settings.SocksProxyURL" class="form-control form-control-sm">
                  <input *ngIf="!settings.UseSocksproxy" readonly name="socksProxyURL" type="text" [(ngModel)]="settings.SocksProxyURL" class="form-control form-control-sm">
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-6">
                <span>{{'SETTINGS.EnableDefaultTrackers' | translate}}</span>
              </div>
              <div class="col-sm-6">
                <div class="ckbx-style-9">
                  <input type="checkbox" id="useTrackers" [(ngModel)]="settings.EnableDefaultTrackers" name="useTrackers">
                  <label for="useTrackers"></label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-6">
                <span>{{'SETTINGS.DefaultTrackerList' | translate}}</span>
              </div>
              <div class="col-sm-6">
                <div class="input-group-sm">
                  <input *ngIf="settings.EnableDefaultTrackers" [title]="'SETTINGS.DefaultTrackerListHint' | translate" name="defaultTrackerList" type="text" [(ngModel)]="settings.DefaultTrackerList" class="form-control form-control-sm">
                  <input *ngIf="!settings.EnableDefaultTrackers" readonly name="defaultTrackerList" type="text" [(ngModel)]="settings.DefaultTrackerList" class="form-control form-control-sm">
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-6">
                <span>{{'SETTINGS.DisableIPv4' | translate}}</span>
              </div>
              <div class="col-sm-6">
                <div class="ckbx-style-9">
                  <input type="checkbox" id="disableIPV4" [(ngModel)]="settings.DisableIPv4" name="disableIPV4">
                  <label for="disableIPV4"></label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-6">
                <span>{{'SETTINGS.DisableIPv6' | translate}}</span>
              </div>
              <div class="col-sm-6">
                <div class="ckbx-style-9">
                  <input type="checkbox" id="disableIPV6" [(ngModel)]="settings.DisableIPv6" name="disableIPV6">
                  <label for="disableIPV6"></label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-6">
                <span>{{'SETTINGS.DownloadDirectory' | translate}}</span>
              </div>
              <div class="col-sm-6">
                <div class="input-group-sm">
                  <input type="text" readonly class="form-control form-control-sm" [title]="'SETTINGS.DownloadDirectoryHint' | translate" (click)="selectDataDir()" name="dataDir" [(ngModel)]="settings.DataDir">
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-6">
                <span>{{'SETTINGS.CacheDirectory' | translate}}</span>
              </div>
              <div class="col-sm-6">
                <div class="input-group-sm">
                  <input type="text" readonly [title]="'SETTINGS.CacheDirectoryHint' | translate" class="form-control form-control-sm" (click)="selectTmpDir()" name="tmpDir" [(ngModel)]="settings.Tmpdir">
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-6">
                <span>{{'SETTINGS.MaxEstablishedConns' | translate}}({{settings.MaxEstablishedConns}})</span>
              </div>
              <div class="col-sm-6">
                <div class="input-group-sm">
                  <input type="range" min="50" max="200" [title]="'SETTINGS.MaxEstablishedConnsHint' | translate" name="maxEstablishedConns" class="custom-range" [(ngModel)]="settings.MaxEstablishedConns">
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-6">
                <span>{{'SETTINGS.Language' | translate}}</span>
              </div>
              <div class="col-sm-6">
                <div ngbDropdown class="d-inline-block">
                  <button class="btn btn-info btn-sm" id="languageList" ngbDropdownToggle>{{localeTolanguage.get(currentLanguage)}}</button>
                  <div ngbDropdownMenu aria-labelledby="languageList">
                    <button (click)="changeLanguage(lang)" *ngFor="let lang of translate.getLangs()" ngbDropdownItem>{{localeTolanguage.get(lang)}}</button>
                  </div>
                </div>
              </div>
            </div>
            <br>
            <div class="form-group row" *ngIf="hasApply === false">
              <div class="col-sm-2 offset-sm-8">
                <button type="button" class="btn btn-light btn-xs btn-radius" (click)="resetSetting()">{{'SETTINGS.Reset' | translate}}</button>
              </div>
              <div class="col-sm-2 offset-sm-0">
                <button type="button" class="btn btn-warning btn-xs btn-radius"  (click)="applySetting()">{{'SETTINGS.Apply' | translate}}</button></div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
